<template>
    <div class="loader">
      <div class="loading">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Loading'
}
</script>

<style scoped>
  .loader{
    display: flex;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,.3);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
  }
.loading{
    position: relative;
  }
  .loading i{
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background:#333;
    position: absolute;
  }
  @keyframes loading{
    0%{
    }
    50%{
      transform:scale(.4);
      opacity: .3;
    }
    100%{
      transform:scale(1);
      opacity: 1;
    }
  }
  .loading i:nth-child(1){
    top:25px;
    left:0;
    animation:loading 1s ease 0s infinite;
  }
  .loading i:nth-child(2){
    top:17px;
    left:17px;
    animation:loading 1s ease -0.12s infinite;
  }
  .loading i:nth-child(3){
    top:0;
    left:25px;
    animation:loading 1s ease -0.24s infinite;
  }
  .loading i:nth-child(4){
    top:-17px;
    left:17px;
    animation:loading 1s ease -0.36s infinite;
  }
  .loading i:nth-child(5){
    top:-25px;
    left:0;
    animation:loading 1s ease -0.48s infinite;
  }
  .loading i:nth-child(6){
    top:-17px;
    left:-17px;
    animation:loading 1s ease -0.6s infinite;
  }
  .loading i:nth-child(7){
    top:0;
    left:-25px;
    animation:loading 1s ease -0.72s infinite;
  }
  .loading i:nth-child(8){
    top:17px;
    left:-17px;
    animation:loading 1s ease -0.84s infinite;
  }
</style>
